<script setup lang="ts">
import type { WordWithStatus } from '@/pages/wordStudy/type'
import StudyWordCard from '@/components/WordCard/StudyWordCard.vue'
import { computed, ref } from 'vue'

const props = defineProps<{
  words: WordWithStatus[]
  limit?: number
}>()

const emit = defineEmits<{
  (e: 'update:words', words: WordWithStatus[]): void
  (e: 'onConfirm', words: WordWithStatus[]): void
  (e: 'onExceed'): void
}>()

const activeWordId = ref<string | number | null>(null)

const selectedCount = computed(() => {
  return props.words.filter(word => word.known === false).length
})
// 是否超出限制
const isExceed = computed(() => {
  return selectedCount.value >= (props.limit || 0)
})

function handleKnownClick(word: WordWithStatus) {
  word.known = true
  emit('update:words', props.words)
}

function handleUnknownClick(word: WordWithStatus) {
  if (isExceed.value) {
    return emit('onExceed')
  }
  word.known = false
  emit('update:words', props.words)
}

function handleWordActivate(wordId: string | number) {
  activeWordId.value = wordId
}

function handleGenerateBtnTap() {
  emit('onConfirm', props.words)
}
</script>

<template>
  <view class="pre-check-word">
    <view class="word-list">
      <view v-for="word in words" :key="word.wordId" class="word-item">
        <StudyWordCard :word="word" type="row" :is-active="activeWordId === word.wordId" @activate="handleWordActivate(word.wordId)" />
        <view class="button-group">
          <view class="status-btn" :class="{ active: word.known === true }" @tap="handleKnownClick(word)">
            会
          </view>
          <view class="status-btn" :class="{ active: word.known === false }" @tap="handleUnknownClick(word)">
            不会
          </view>
        </view>
      </view>
    </view>

    <view class="footer">
      <view class="selected-info">
        <text>
          已选择单词 <text class="selected-count">
            {{ selectedCount }}
          </text> 个
        </text>
      </view>
      <view class="generate-btn" @tap="handleGenerateBtnTap">
        生成单词表
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.pre-check-word {
    padding: 0 30rpx;
    .selected-count{
        font-size: 30rpx;
        color: $primary-highlight-color;
        font-weight: bold;
    }

    .word-list {
        .word-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            border-bottom: 2rpx solid #f5f5f5;
            position: relative;

            .word-card{
                padding-right: 260rpx;
            }

            .word-text {
                font-size: 32rpx;
                flex: 1;
            }

            .button-group {
                display: flex;
                gap: 20rpx;
                margin-left: 20rpx;
                position: absolute;
                right: 20rpx;

                .status-btn {
                    width: 90rpx;
                    font-size: 20rpx;
                    height: 46rpx;
                    line-height: 46rpx;
                    text-align: center;
                    border-radius: 10rpx;
                    background-color: #fff;
                    border: 2rpx solid #ccc;
                    color: #999999;
                    cursor: pointer;

                    &.active {
                        font-weight: bold;
                        color: #4CAF50;
                        border-color: #4CAF50;
                        &:last-child {
                            color: #FF5252;
                            border-color: #FF5252;
                        }
                    }
                }
            }
        }
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 100rpx;
        width: 100%;
        background-color: #fff;
        // padding: 30rpx;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding-left: 20rpx;

        .selected-info {
            justify-content: space-between;
            font-size: 28rpx;
            flex: 1;
            color: #666;
        }

        .generate-btn {
            background-color: $primary-highlight-color;
            color: #fff;
            font-size: 32rpx;
            line-height: 100rpx;
            height: 100rpx;
            width: 50%;
            text-align: center;
            cursor: pointer;
            border:0;
            padding: 0 20rpx;
        }
    }
}
</style>
